{% extends 'base.html' %}

{% load static %}

{% block title %}{{ article.title }} - {{ site_settings.site_name }}{% endblock %}

{% block extra_head %}
    <link rel='stylesheet' id='ajax-comment-css' href='{% static 'css/app.css' %}' type='text/css' media='all'/>
{% endblock %}

{% block content %}
    <div class="wrapper">
        {% if article.image %}
            <section class="left" style="background-image: url('{{ article.image.url }}')"></section>
        {% else %}
            <section class="left"
                     style="background-image: url('/static/images/202002050420313-scaled.jpeg')"></section>
        {% endif %}
        <!-- 包含 sidebar 模板 -->
        {% include 'sidebar.html' %}
        <section class="right">
            <div class="nav_ico">
                <svg class="ham hamRotate ham1" viewBox="0 0 100 100" onclick="this.classList.toggle('active')">
                    <path class="line top"
                          d="m 30,33 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40">
                    </path>
                    <path class="line middle" d="m 30,50 h 40"></path>
                    <path class="line bottom"
                          d="m 30,67 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40">
                    </path>
                </svg>
            </div>
            <link rel="stylesheet" href="{% static 'css/monokai-sublime.min.css' %}">
            <script src="{% static 'js/highlight.min.js' %}"></script>
            <script src="{% static 'js/highlightjs-line-numbers.min.js' %}"></script>
            <script>
                hljs.initHighlightingOnLoad();
                $(document).ready(function () {
                    $('.wznrys pre code').each(function (i, block) {
                        hljs.lineNumbersBlock(block);
                    });
                });
            </script>
            <div class="right_box">
                <div class="single_info_box">
                    <h1 class="single_title">
                        {{ article.title }}
                    </h1>
                    <div class="single_info">
						<span>
							<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-clock-history"
                                 fill="currentColor" xmlns="http://www.w3.org/2000/svg">
								<path fill-rule="evenodd"
                                      d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022l-.074.997zm2.004.45a7.003 7.003 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342l-.36.933zm1.37.71a7.01 7.01 0 0 0-.439-.27l.493-.87a8.025 8.025 0 0 1 .979.654l-.615.789a6.996 6.996 0 0 0-.418-.302zm1.834 1.79a6.99 6.99 0 0 0-.653-.796l.724-.69c.27.285.52.59.747.91l-.818.576zm.744 1.352a7.08 7.08 0 0 0-.214-.468l.893-.45a7.976 7.976 0 0 1 .45 1.088l-.95.313a7.023 7.023 0 0 0-.179-.483zm.53 2.507a6.991 6.991 0 0 0-.1-1.025l.985-.17c.067.386.106.778.116 1.17l-1 .025zm-.131 1.538c.033-.17.06-.339.081-.51l.993.123a7.957 7.957 0 0 1-.23 1.155l-.964-.267c.046-.165.086-.332.12-.501zm-.952 2.379c.184-.29.346-.594.486-.908l.914.405c-.16.36-.345.706-.555 1.038l-.845-.535zm-.964 1.205c.122-.122.239-.248.35-.378l.758.653a8.073 8.073 0 0 1-.401.432l-.707-.707z"></path>
								<path fill-rule="evenodd"
                                      d="M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0v1z"></path>
								<path fill-rule="evenodd"
                                      d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5z"></path>
							</svg>
							{{ article.created_at|date:"Y-m-d" }}
                        </span>
                        <span>
							<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-justify-left"
                                 fill="currentColor" xmlns="http://www.w3.org/2000/svg">
								<path fill-rule="evenodd"
                                      d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"></path>
							</svg>
                        <a href="{{ article.category.get_absolute_url }}"
                           rel="category tag">
                        {{ article.category.name }}
                        </a>
                    </span>
                        <span>
							<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-layers" fill="currentColor"
                                 xmlns="http://www.w3.org/2000/svg">
								<path fill-rule="evenodd"
                                      d="M3.188 8L.264 9.559a.5.5 0 0 0 0 .882l7.5 4a.5.5 0 0 0 .47 0l7.5-4a.5.5 0 0 0 0-.882L12.813 8l-1.063.567L14.438 10 8 13.433 1.562 10 4.25 8.567 3.187 8z"></path>
								<path fill-rule="evenodd"
                                      d="M7.765 1.559a.5.5 0 0 1 .47 0l7.5 4a.5.5 0 0 1 0 .882l-7.5 4a.5.5 0 0 1-.47 0l-7.5-4a.5.5 0 0 1 0-.882l7.5-4zM1.563 6L8 9.433 14.438 6 8 2.567 1.562 6z"></path>
							</svg>
                        {{ article.click_count }}
                    </span>
                    </div>
                </div>
                <div class="wznrys">
                    {{ article.content|safe }}
                </div>


                <div class="next_prev_posts">
                    <div class="nav_previous prev_next_box" style="">
                        {% if prev_article %}
                            <a href="{{ prev_article.get_absolute_url }}" title="{{ prev_article.title }}" rel="prev"
                               style="background-image: url(https://cux.huitheme.cn/wp-content/themes/cux1/timthumb.php?src=https://cux.huitheme.cn/wp-content/uploads/2020/02/2020022314401714-100x100.jpg&w=430&h=220&zc=1);">
                                <div class="prev_next_info">
                                    <small>上一篇</small>
                                    <p>{{ prev_article.title }}</p>
                                </div>
                            </a>
                        {% endif %}
                    </div>
                    <div class="nav_next prev_next_box" style="">
                        {% if next_article %}
                            <a href="{{ next_article.get_absolute_url }}" title="{{ next_article.title }}"
                               rel="next"
                               style="background-image: url(https://cux.huitheme.cn/wp-content/themes/cux1/timthumb.php?src=https://cux.huitheme.cn/wp-content/uploads/2020/02/202002050420313-scaled.jpeg&w=430&h=220&zc=1);">
                                <div class="prev_next_info">
                                    <small>下一篇</small>
                                    <p>{{ next_article.title }}</p>
                                </div>
                            </a>
                        {% endif %}

                    </div>
                </div>

                <div id="comments" class="comments-area">
                    <div class="layoutSingleColumn">
                        <h3 class="comments-title">
                            <svg x="1576808176091" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="https://www.w3.org/2000/svg" p-id="16246">
                                <path
                                        d="M696.3 854.6c16.2 14.2 41.6 2.7 41.6-18.9V715.3h125.5c41.6 0 75.3-33.7 75.3-75.3V355.1H374c-41.6 0-75.3 33.7-75.3 75.3v284.9h238.4l159.2 139.3z"
                                        fill="#F4C708" p-id="16247"></path>
                                <path
                                        d="M712.6 882.2c-11 0-21.7-3.9-30.4-11.6l-153.1-134H160.6c-53.3 0-96.6-43.4-96.6-96.6V238.4c0-53.3 43.4-96.6 96.6-96.6h702.8c53.3 0 96.6 43.4 96.6 96.6V640c0 53.3-43.4 96.6-96.6 96.6H759.2v99c0 18.5-10.4 34.6-27.3 42.3-6.2 2.9-12.8 4.3-19.3 4.3z m-552-697.7c-29.8 0-54 24.2-54 54V640c0 29.8 24.2 54 54 54h376.5c5.2 0 10.2 1.9 14 5.3l159.2 139.3c0.5 0.4 1.8 1.7 4 0.6 2.2-1 2.2-2.8 2.2-3.4V715.3c0-11.8 9.5-21.3 21.3-21.3h125.5c29.8 0 54-24.2 54-54V238.4c0-29.8-24.2-54-54-54H160.6z"
                                        fill="#111111" p-id="16248"></path>
                                <path d="M499.5 426.7m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#111111"
                                      p-id="16249"></path>
                                <path d="M742.9 426.7m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#111111"
                                      p-id="16250"></path>
                                <path d="M277.3 426.7m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#111111"
                                      p-id="16251"></path>
                            </svg>
                            <!-- 评论数量 = 评论总数 + 回复总数 -->
                            {{ comment_count }} 条评论
                        </h3>
                        <ol class="comment-list">
                            {% for comment in comments.all %}
                                {% include "comment.html" with comment=comment %}
                            {% empty %}
                                <p>没有评论</p>
                            {% endfor %}
                        </ol>

                        <div id="respond" class="comment-respond">
                            <h3 id="reply-title" class="comment-reply-title">发布评论
                                <small>
                                    <a rel="nofollow"
                                       id="cancel-comment-reply-link"
                                       href="{{ article.get_absolute_url }}#respond"
                                       style="display:none;">
                                        取消回复
                                    </a>
                                </small>
                            </h3>
                            <form action="" method="post" id="commentform"
                                  class="comment-form">
                                {% csrf_token %}
                                <p class="comment-form-comment">
                                    <label for="comment"></label>
                                    <textarea id="comment" name="content"
                                              aria-required="true"></textarea>
                                </p>
                                <p class="comment-form-author">
                                    <label for="author"></label>
                                    <input id="author" class="blog-form-input"
                                           placeholder="昵称" name="author" type="text"
                                           value=""
                                           size="30"/>
                                </p>
                                <p class="comment-form-email">
                                    <label for="email"></label>
                                    <input id="email" class="blog-form-input"
                                           placeholder="Email " name="email" type="text"
                                           value=""
                                           size="30"/>
                                </p>
                                <p class="comment-form-url">
                                    <label for="url"></label>
                                    <input id="url" class="blog-form-input"
                                           placeholder="网站地址"
                                           name="url" type="text" value="" size="30"/>
                                </p>
                                <p class="form-submit">
                                    <input name="submit" type="submit" id="submit" class="submit"
                                           value="发布评论"/>
                                    <input type='hidden'
                                           name='article'
                                           value='{{ article.pk }}'
                                           id='article'/>
                                    <input type='hidden' name='comment_parent' id='comment_parent' value=''/>
                                </p>
                            </form>
                        </div><!-- #respond -->

                    </div>
                </div>
            </div>

            <!-- 包含 foot 模板 -->
            {% include 'foot.html' %}
        </section><!--right-->
    </div>
{% endblock %}

{% block extra_foot %}
    <script type="text/javascript" src="{% static 'js/comment-reply.min.js' %}" id="comment-reply-js" async="async"
            data-wp-strategy="async"></script>
    <script type="text/javascript" id="ajax-comment-js-extra">
        /* <![CDATA[ */
        const ajaxcomment = {
            "ajax_url": "{% url 'article_detail' pk=article.pk %}",
            "order": "asc",
            "formpostion": "bottom"
        };
        /* ]]> */
    </script>
    <script type="text/javascript" src="{% static 'js/app.js' %}" id="ajax-comment-js"></script>
{% endblock %}
